<template>
  <div id="">
    <div class="paT55 ">
      <div class="search">
        <div class="params ctrl">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="调查时间">
              <el-date-picker
                  v-model="time"
                  @change="timeChange"
                  format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="状态">
              <el-select v-model="status" class="p-frame">
                <el-option
                    v-for="item in options"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-button type="primary" @click="getOilteaSurvey">查询</el-button>
          </el-form>
        </div>
      </div>
      <el-scrollbar class="scollWrap">
        <div class="forms">
          <el-table ref="multipleTable"
                    :height="elTableH"
                    :header-row-style="HeaderStyle"
                    :row-style='cellStyle'
                    border
                    stripe
                    :data="tableData"
                    style="width: 100%"
          >
            <el-table-column
                align="center"
                prop="sampleVo.species"
                show-overflow-tooltip
                label="样地物种">
            </el-table-column>
            <el-table-column
                align="center"
                prop="surveyTime"
                show-overflow-tooltip
                label="调查时间">
            </el-table-column>
            <el-table-column
                align="center"
                prop="lon"
                show-overflow-tooltip
                label="经度">
            </el-table-column>
            <el-table-column
                align="center"
                prop="lat"
                show-overflow-tooltip
                label="纬度">
            </el-table-column>
            <el-table-column
                align="center"
                prop="alt"
                show-overflow-tooltip
                label="海拔">
            </el-table-column>
            <el-table-column
                align="center"
                prop="inquirer"
                show-overflow-tooltip
                label="调查人">
            </el-table-column>
            <el-table-column
                align="center"
                prop="remark"
                show-overflow-tooltip
                label="备注">
            </el-table-column>
            <el-table-column
                align="center"
                prop="status"
                show-overflow-tooltip
                label="状态">
            </el-table-column>
            <el-table-column
                align="center"
                fixed="right"
                label="查看"
                width="140">
              <template slot-scope="scope">
                <span class="pointer" @click="seeSurveyData(scope.row)">查看</span><span class="line"></span>
                <span class="pointer" @click="editSurveyData(scope.row)">编辑</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer">
            <div class="paging info">
              <el-pagination
                  :page-size="this.pageSize"
                  :page-sizes="[10,15]"
                  :total="tableDataTotalCount"
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  background
                  layout="total, sizes, prev, pager, next">
              </el-pagination>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <!--   查看弹框   -->
      <div class="dialog">
        <el-dialog :close-on-click-modal="false" :visible.sync="seeDialogFormVisible" title="样地详情" class="dialogContent clearfix" @close="seeCancel">
          <div class="seeDialogTable">
            <div class="seeDialogParent">
              <div class="seeDialogTitle">样地总表</div>
              <div class="parentTable">
                <ul>
                  <li class="tableItem">
                    <div class="itemList">物种</div>
                    <div class="itemList">
                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.species}}
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">经纬度</div>
                    <div class="itemList">
                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.lon ? this.seeDialogData.sampleVo.lon
                      + ',':''}}
                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.lat ? this.seeDialogData.sampleVo.lat
                      : ''}}
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">调查时间</div>
                    <div class="itemList">
                      <el-tooltip class="item" effect="dark"
                                  :content="this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.surveyDay"
                                  placement="top">
                        <div class="textOverflow">{{this.seeDialogData.sampleVo &&
                          this.seeDialogData.sampleVo.surveyDay}}
                        </div>
                      </el-tooltip>
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">调查地点</div>
                    <div class="itemList textOverflow">
                      <el-tooltip class="item" effect="dark" :content="this.seeDialogData.sampleVo &&
                          this.seeDialogData.sampleVo.surveySite" placement="top">
                        <div class="textOverflow">{{this.seeDialogData.sampleVo &&
                          this.seeDialogData.sampleVo.surveySite}}
                        </div>
                      </el-tooltip>

                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">样地编号</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.sampleNumber}}
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">面积[单位亩]</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.area}}</div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">株距[m]</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.plantSpac}}</div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">行距[m]</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.lineSpac}}</div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">造林时间</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.afforestDate}}
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">坡向</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.aspect}}</div>
                  </li>
                  <li class="tableItem w100">
                    <div class="itemList">样株类型</div>
                    <div class="itemList">{{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.plantType}}</div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="seeDialogChild">
              <div class="seeDialogTitle">样地个体调查表</div>
              <div class="childTable">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="树体" name="tree">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">树势</div>
                        <div class="itemList">{{this.seeDialogData.bodyTrend}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">树形</div>
                        <div class="itemList">{{this.seeDialogData.bodyShape}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">树高(L)</div>
                        <div class="itemList">{{this.seeDialogData.bodyHeight}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">冠幅(南北,D2)</div>
                        <div class="itemList textOverflow">{{this.seeDialogData.bodyCrownNb}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">冠幅面积</div>
                        <div class="itemList">{{this.seeDialogData.bodyCrownArea}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">树冠体积</div>
                        <div class="itemList">{{this.seeDialogData.bodyCrownBulk}}</div>
                      </li>
                      <li class="tableItem w100">
                        <div class="itemList">叶面积指数</div>
                        <div class="itemList">{{this.seeDialogData.bodyAreaIndex}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="枝干" name="branch">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">新梢发枝量</div>
                        <div class="itemList">{{this.seeDialogData.limbXsfzl}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">新梢长度</div>
                        <div class="itemList">{{this.seeDialogData.limbXscd}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">分枝角度[°]</div>
                        <div class="itemList">{{this.seeDialogData.limbFzjd}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">新梢颜色</div>
                        <div class="itemList textOverflow">{{this.seeDialogData.limbXsys}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="叶片" name="leaf">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">叶形</div>
                        <div class="itemList">{{this.seeDialogData.leafShape}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">叶材</div>
                        <div class="itemList">{{this.seeDialogData.leafTexture}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">叶面平展度</div>
                        <div class="itemList">{{this.seeDialogData.leafYmpzd}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">叶尖形态</div>
                        <div class="itemList">{{this.seeDialogData.leafYjxt}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="花" name="flower">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">花期</div>
                        <div class="itemList">{{this.seeDialogData.flowerSeason}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">始花期5%-25%</div>
                        <div class="itemList">{{this.seeDialogData.flowerStart}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">盛花期25%-75%</div>
                        <div class="itemList">{{this.seeDialogData.flowerBloom}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">末花期>75%</div>
                        <div class="itemList">{{this.seeDialogData.flowerEnd}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">花瓣颜色</div>
                        <div class="itemList">{{this.seeDialogData.flowerHbys}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">
                          <el-tooltip class="item" effect="dark" content="花径[>30朵，平均值]" placement="top">
                            <div class="textOverflow">花径[>30朵，平均值]</div>
                          </el-tooltip>
                        </div>
                        <div class="itemList">
                          <el-tooltip class="item" effect="dark" :content="this.seeDialogData.flowerHj" placement="top">
                            <div class="textOverflow">{{this.seeDialogData.flowerHj}}</div>
                          </el-tooltip>
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">花柱开裂数</div>
                        <div class="itemList">{{this.seeDialogData.flowerHzkls}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">柱头开裂程度</div>
                        <div class="itemList">{{this.seeDialogData.leafTexture}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="果实" name="fruit">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">果形</div>
                        <div class="itemList">{{this.seeDialogData.fruitGx}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果色</div>
                        <div class="itemList">{{this.seeDialogData.fruitGs}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">是否有棱</div>
                        <div class="itemList">{{this.seeDialogData.fruitSfyl}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">鲜果总重（≥30个）</div>
                        <div class="itemList">{{this.seeDialogData.fruitXgzz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">单果重</div>
                        <div class="itemList">{{this.seeDialogData.fruitDgz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果实均匀度</div>
                        <div class="itemList">{{this.seeDialogData.fruitJyd}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果皮厚度</div>
                        <div class="itemList">{{this.seeDialogData.fruitHd}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果形指数</div>
                        <div class="itemList">{{this.seeDialogData.fruitGxzs}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果实横径</div>
                        <div class="itemList">{{this.seeDialogData.fruitGshj}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果实纵径</div>
                        <div class="itemList">{{this.seeDialogData.fruitGszj}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">单果种子数</div>
                        <div class="itemList">{{this.seeDialogData.fruitDgzzs}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">单果鲜籽重</div>
                        <div class="itemList">{{this.seeDialogData.fruitDgxzz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">鲜籽总重</div>
                        <div class="itemList">{{this.seeDialogData.fruitXzzz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">鲜果出籽率</div>
                        <div class="itemList">{{this.seeDialogData.fruitXgczl}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">干籽总重</div>
                        <div class="itemList">{{this.seeDialogData.fruitGzzl}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">干仁总重</div>
                        <div class="itemList">{{this.seeDialogData.fruitGrzz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">干籽出仁率</div>
                        <div class="itemList">{{this.seeDialogData.fruitGzcrl}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">干出籽率</div>
                        <div class="itemList">{{this.seeDialogData.fruitGzczl}}</div>
                      </li>
                      <li class="tableItem w100">
                        <div class="itemList">种仁含油率</div>
                        <div class="itemList">{{this.seeDialogData.fruitZrhyl}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="产量性状" name="yield">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">座果率</div>
                        <div class="itemList">{{this.seeDialogData.yieldZgl}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">结果量</div>
                        <div class="itemList">{{this.seeDialogData.yieldJgl}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="油脂品质性状" name="grease">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">油酸</div>
                        <div class="itemList">{{this.seeDialogData.oilYs}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">亚油酸</div>
                        <div class="itemList">{{this.seeDialogData.oilYys}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">硬脂酸</div>
                        <div class="itemList">{{this.seeDialogData.oilYzs}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">棕榈酸</div>
                        <div class="itemList">{{this.seeDialogData.oilZyy}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">维生素E</div>
                        <div class="itemList">{{this.seeDialogData.oilWsse}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">角鲨烯</div>
                        <div class="itemList">{{this.seeDialogData.oilJsx}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">甾醇</div>
                        <div class="itemList">{{this.seeDialogData.oilZc}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">多酚</div>
                        <div class="itemList">{{this.seeDialogData.oilDf}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">碘值</div>
                        <div class="itemList">{{this.seeDialogData.oilDz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">色值</div>
                        <div class="itemList">{{this.seeDialogData.oilSz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">比重</div>
                        <div class="itemList">{{this.seeDialogData.oilBz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">酸值</div>
                        <div class="itemList">{{this.seeDialogData.oilSuz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">过氧化值</div>
                        <div class="itemList">{{this.seeDialogData.oilGyhz}}</div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">皂化值</div>
                        <div class="itemList">{{this.seeDialogData.saponificationValue}}</div>
                      </li>
                      <li class="tableItem w100">
                        <div class="itemList">不皂化物</div>
                        <div class="itemList">{{this.seeDialogData.oilBzhw}}</div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="附件" name="enclosure">
                    <div class="enclosureItem enclosureMp3 " v-if="this.seeDialogData.fileType === 'mp3'">
                      <el-scrollbar style="height: 100%">
                        <div v-for="(item,index) in this.seeDialogData.fileList" :key="index" class="mp3Item">
                          <audio controls="controls" :src="fileServerUrl + item.path" style="height: 100%">
                            当前浏览器不支持audio
                          </audio>
                        </div>
                      </el-scrollbar>
                    </div>
                    <div class="enclosureItem enclosureVideo" v-if="this.seeDialogData.fileType === 'video'">
                      <el-scrollbar style="height: 262px">
                        <div v-for="(item,index) in this.seeDialogData.fileList" :key="index" class="videoItem">
                          <video :src="fileServerUrl + item.path" controls="controls" width="100%" height="100%">
                            您的浏览器不支持 video 标签。
                          </video>
                        </div>
                      </el-scrollbar>
                    </div>
                    <div class="enclosureItem enclosureImg" v-if="this.seeDialogData.fileType === 'img'">
                      <el-scrollbar style="height: 180px">
                        <div v-for="(item,index) in this.seeDialogData.fileList" :key="index" class="enclosureImgList">
                          <!--                          :preview-src-list="getSrcList(index)"-->
                          <el-image
                              style="width: 100%; height: 100%"
                              :src="fileServerUrl + item.path"
                          >
                          </el-image>
                        </div>
                      </el-scrollbar>
                    </div>
                    <div v-if="!this.seeDialogData.fileType">
                      暂无数据
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
          <div class="dialog-footer" slot="footer">
            <el-button class="dialogBtn" type="primary"  @click="seeCancel">关闭</el-button>
          </div>
        </el-dialog>
      </div>
      <!--   编辑弹框   -->
      <div class="dialog">
        <el-dialog :close-on-click-modal="false" :visible.sync="editDialogFormVisible" title="样地详情" class="dialogContent clearfix" @close="updataCancel">
          <div class="seeDialogTable">
            <div class="seeDialogParent">
              <div class="seeDialogTitle">样地总表</div>
              <div class="parentTable">
                <ul>
                  <li class="tableItem">
                    <div class="itemList">物种</div>
                    <div class="itemList">
<!--                      <el-input placeholder="请填写内容" v-model="updataDialogData.sampleVo.species" v-if="updataDialogData.sampleVo"></el-input>-->
                      <el-select v-model="updataDialogData.sampleVo.species" placeholder="请选择" v-if="updataDialogData.sampleVo">
                        <el-option
                            v-for="item in speciesData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">经度</div>
                    <div class="itemList">
                      <el-input placeholder="请填写" v-model="updataDialogData.sampleVo.lon" v-if="updataDialogData.sampleVo"></el-input>
<!--                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.lon ? this.seeDialogData.sampleVo.lon-->
<!--                      + ',':''}}-->
<!--                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.lat ? this.seeDialogData.sampleVo.lat-->
<!--                      : ''}}-->
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">纬度</div>
                    <div class="itemList">
                      <el-input placeholder="请填写" v-model="updataDialogData.sampleVo.lat" v-if="updataDialogData.sampleVo"></el-input>
                      <!--                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.lon ? this.seeDialogData.sampleVo.lon-->
                      <!--                      + ',':''}}-->
                      <!--                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.lat ? this.seeDialogData.sampleVo.lat-->
                      <!--                      : ''}}-->
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">调查日期</div>
                    <div class="itemList">
                      <el-tooltip class="item" effect="dark"
                                  :content="this.updataDialogData.sampleVo && this.updataDialogData.sampleVo.surveyDay"
                                  placement="top">
                        <div class="textOverflow datePicker">
                          <el-date-picker
                              v-if="updataDialogData.sampleVo"
                              format="yyyy-MM-dd HH:mm:ss"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              v-model="updataDialogData.sampleVo.surveyDay"
                              type="date"
                              placeholder="选择日期">
                          </el-date-picker>
<!--                          <el-input placeholder="请填写调查日期" v-model="updataDialogData.sampleVo.surveyDay" v-if="updataDialogData.sampleVo"></el-input>-->
<!--                          {{this.seeDialogData.sampleVo &&this.seeDialogData.sampleVo.surveyDay}}-->
                        </div>
                      </el-tooltip>
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">调查地点</div>
                    <div class="itemList textOverflow">
                      <el-tooltip class="item" effect="dark" :content="this.updataDialogData.sampleVo &&
                          this.updataDialogData.sampleVo.surveySite" placement="top">
                        <div class="textOverflow">
<!--                          <el-cascader-->
<!--                              v-if="updataDialogData.sampleVo"-->
<!--                              size="large"-->
<!--                              :options="city"-->
<!--                              v-model="selectedOptions"-->
<!--                              @change="handleChange">-->
<!--                          </el-cascader>-->
                          <el-input placeholder="请填写调查地点" v-model="updataDialogData.sampleVo.surveySite" v-if="updataDialogData.sampleVo"></el-input>
<!--                          {{this.seeDialogData.sampleVo &&this.seeDialogData.sampleVo.surveySite}}-->
                        </div>
                      </el-tooltip>
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">样地编号</div>
                    <div class="itemList">
                      <el-input placeholder="请填写" v-model="updataDialogData.sampleVo.sampleNumber" v-if="updataDialogData.sampleVo" required></el-input>
<!--                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.sampleNumber}}-->
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">面积[单位亩]</div>
                    <div class="itemList">
                      <el-input placeholder="请填写" v-model="updataDialogData.sampleVo.area" v-if="updataDialogData.sampleVo"></el-input>
<!--                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.area}}-->
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">株距[m]</div>
                    <div class="itemList">
                      <el-input placeholder="请填写" v-model="updataDialogData.sampleVo.plantSpac" v-if="updataDialogData.sampleVo"></el-input>
<!--                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.plantSpac}}-->
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">行距[m]</div>
                    <div class="itemList">
                      <el-input placeholder="请填写" v-model="updataDialogData.sampleVo.lineSpac" v-if="updataDialogData.sampleVo"></el-input>
<!--                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.lineSpac}}-->
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">造林时间</div>
                    <div class="itemList">
                      <el-input placeholder="请填写" v-model="updataDialogData.sampleVo.afforestDate" v-if="updataDialogData.sampleVo"></el-input>
<!--                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.afforestDate}}-->
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">坡向</div>
                    <div class="itemList">
                      <el-input placeholder="请填写" v-model="updataDialogData.sampleVo.aspect" v-if="updataDialogData.sampleVo" :disabled="true"></el-input>
<!--                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.aspect}}-->
                    </div>
                  </li>
                  <li class="tableItem">
                    <div class="itemList">样株类型</div>
                    <div class="itemList">
                      <el-select v-model="updataDialogData.sampleVo.plantType" placeholder="请选择" v-if="updataDialogData.sampleVo">
                        <el-option
                            v-for="item in samplePlantTypeData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
<!--                      <el-input placeholder="请填写" v-model="updataDialogData.sampleVo.plantType" v-if="updataDialogData.sampleVo"></el-input>-->
<!--                      {{this.seeDialogData.sampleVo && this.seeDialogData.sampleVo.plantType}}-->
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="seeDialogChild">
              <div class="seeDialogTitle">样地个体调查表</div>
              <div class="childTable">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="树体" name="tree">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">树势</div>
                        <div class="itemList">
                          <el-select v-model="updataDialogData.bodyTrend" placeholder="请选择">
                            <el-option
                                v-for="item in treePotentialData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
<!--                          <el-input placeholder="请填写" v-model="updataDialogData.bodyTrend"></el-input>-->
<!--                          {{this.seeDialogData.bodyTrend}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">树形</div>
                        <div class="itemList">
                          <el-select v-model="updataDialogData.bodyShape" placeholder="请选择">
                            <el-option
                                v-for="item in treeFormData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
<!--                          <el-input placeholder="请填写" v-model="updataDialogData.bodyShape"></el-input>-->
<!--                          {{this.seeDialogData.bodyShape}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">树高(L)</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.bodyHeight"></el-input>
<!--                          {{this.seeDialogData.bodyHeight}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">冠幅(南北,D2)</div>
                        <div class="itemList textOverflow">
                          <el-input placeholder="请填写" v-model="updataDialogData.bodyCrownNb"></el-input>
<!--                          {{this.seeDialogData.bodyCrownNb}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">冠幅面积</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.bodyCrownArea"></el-input>
<!--                          {{this.seeDialogData.bodyCrownArea}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">树冠体积</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.bodyCrownBulk"></el-input>
<!--                          {{this.seeDialogData.bodyCrownBulk}}-->
                        </div>
                      </li>
                      <li class="tableItem w100">
                        <div class="itemList">叶面积指数</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.bodyAreaIndex"></el-input>
<!--                          {{this.seeDialogData.bodyAreaIndex}}-->
                        </div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="枝干" name="branch">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">新梢发枝量</div>
                        <div class="itemList">
                          <el-select v-model="updataDialogData.limbXsfzl" placeholder="请选择">
                            <el-option
                                v-for="item in limbXsfzlData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
<!--                          <el-input placeholder="请填写" v-model="updataDialogData.limbXsfzl"></el-input>-->
<!--                          {{this.seeDialogData.limbXsfzl}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">新梢长度</div>
                        <div class="itemList">
                          <el-select v-model="updataDialogData.limbXscd" placeholder="请选择">
                            <el-option
                                v-for="item in limbXscdData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
<!--                          <el-input placeholder="请填写" v-model="updataDialogData.limbXscd"></el-input>-->
<!--                          {{this.seeDialogData.limbXscd}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">分枝角度[°]</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.limbFzjd"></el-input>
<!--                          {{this.seeDialogData.limbFzjd}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">新梢颜色</div>
                        <div class="itemList textOverflow">
                          <el-select v-model="updataDialogData.limbXsys" placeholder="请选择">
                            <el-option
                                v-for="item in limbXsysData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
<!--                          <el-input placeholder="请填写" v-model="updataDialogData.limbXsys"></el-input>-->
<!--                          {{this.seeDialogData.limbXsys}}-->
                        </div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="叶片" name="leaf">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">叶形</div>
                        <div class="itemList">
                          <el-select v-model="updataDialogData.leafShape" placeholder="请选择">
                            <el-option
                                v-for="item in leafShapeData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
<!--                          <el-input placeholder="请填写" v-model="updataDialogData.leafShape"></el-input>-->
<!--                          {{this.seeDialogData.leafShape}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">叶材</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.leafTexture"></el-input>
<!--                          {{this.seeDialogData.leafTexture}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">叶面平展度</div>
                        <div class="itemList">
                          <el-select v-model="updataDialogData.leafYmpzd" placeholder="请选择">
                            <el-option
                                v-for="item in leafYmpzdData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
<!--                          <el-input placeholder="请填写" v-model="updataDialogData.leafYmpzd"></el-input>-->
                          <!--                          {{this.seeDialogData.leafTexture}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">叶尖形态</div>
                        <div class="itemList">
                          <el-select v-model="updataDialogData.leafYjxt" placeholder="请选择">
                            <el-option
                                v-for="item in leafYjxtData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
<!--                          <el-input placeholder="请填写" v-model="updataDialogData.leafYjxt"></el-input>-->
                          <!--                          {{this.seeDialogData.leafTexture}}-->
                        </div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="花" name="flower">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">花期</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.flowerSeason"></el-input>
<!--                          {{this.seeDialogData.flowerSeason}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">始花期5%-25%</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.flowerStart"></el-input>
<!--                          {{this.seeDialogData.flowerStart}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">盛花期25%-75%</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.flowerBloom"></el-input>
<!--                          {{this.seeDialogData.flowerBloom}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">末花期>75%</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.flowerEnd"></el-input>
<!--                          {{this.seeDialogData.flowerEnd}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">花瓣颜色</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.flowerHbys"></el-input>
<!--                          {{this.seeDialogData.flowerHbys}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">
                          <el-tooltip class="item" effect="dark" content="花径[>30朵，平均值]" placement="top">
                            <div class="textOverflow">花径[>30朵，平均值]</div>
                          </el-tooltip>
                        </div>
                        <div class="itemList">
                          <el-tooltip class="item" effect="dark" :content="this.updataDialogData.flowerHj" placement="top">
                            <div class="textOverflow">
                              <el-input placeholder="请填写" v-model="updataDialogData.flowerHj"></el-input>
<!--                              {{this.seeDialogData.flowerHj}}-->
                            </div>
                          </el-tooltip>
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">花柱开裂数</div>
                        <div class="itemList">
                          <el-select v-model="updataDialogData.flowerHzkls" placeholder="请选择">
                            <el-option
                                v-for="item in flowerHzklsData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
<!--                          <el-input placeholder="请填写" v-model="updataDialogData.flowerHzkls"></el-input>-->
<!--                          {{this.seeDialogData.flowerHzkls}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">柱头开裂程度</div>
                        <div class="itemList">
                          <el-select v-model="updataDialogData.leafTexture" placeholder="请选择">
                            <el-option
                                v-for="item in flowerZtklcdData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
<!--                          <el-input placeholder="请填写" v-model="updataDialogData.leafTexture"></el-input>-->
<!--                          {{this.seeDialogData.leafTexture}}-->
                        </div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="果实" name="fruit">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">果形</div>
                        <div class="itemList">
                          <el-select v-model="updataDialogData.fruitGx" placeholder="请选择">
                            <el-option
                                v-for="item in fruitGxData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
<!--                          {{this.seeDialogData.fruitGx}}-->
<!--                          <el-input placeholder="请填写" v-model="updataDialogData.fruitGx"></el-input>-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果色</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitGs"></el-input>
<!--                          {{this.seeDialogData.fruitGs}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">是否有棱</div>
                        <div class="itemList">
                          <el-select v-model="updataDialogData.fruitSfyl" placeholder="请选择">
                            <el-option
                                v-for="item in fruitSfylData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>
<!--                          <el-input placeholder="请填写" v-model="updataDialogData.fruitSfyl"></el-input>-->
<!--                          {{this.seeDialogData.fruitSfyl}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">鲜果总重（≥30个）</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitXgzz"></el-input>
<!--                          {{this.seeDialogData.fruitXgzz}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">单果重</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitDgz"></el-input>
<!--                          {{this.seeDialogData.fruitDgz}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果实均匀度</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitJyd"></el-input>
<!--                          {{this.seeDialogData.fruitJyd}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果皮厚度</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitHd"></el-input>
<!--                          {{this.seeDialogData.fruitHd}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果形指数</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitGxzs"></el-input>
<!--                          {{this.seeDialogData.fruitGxzs}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果实横径</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitGshj"></el-input>
<!--                          {{this.seeDialogData.fruitGshj}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">果实纵径</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitGszj"></el-input>
<!--                          {{this.seeDialogData.fruitGszj}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">单果种子数</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitDgzzs"></el-input>
<!--                          {{this.seeDialogData.fruitDgzzs}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">单果鲜籽重</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitDgxzz"></el-input>
<!--                          {{this.seeDialogData.fruitDgxzz}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">鲜籽总重</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitXzzz"></el-input>
<!--                          {{this.seeDialogData.fruitXzzz}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">鲜果出籽率</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitXgczl"></el-input>
<!--                          {{this.seeDialogData.fruitXgczl}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">干籽总重</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitGzzl"></el-input>
<!--                          {{this.seeDialogData.fruitGzzl}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">干仁总重</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitGrzz"></el-input>
<!--                          {{this.seeDialogData.fruitGrzz}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">干籽出仁率</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitGzcrl"></el-input>
<!--                          {{this.seeDialogData.fruitGzcrl}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">干出籽率</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitGzczl"></el-input>
<!--                          {{this.seeDialogData.fruitGzczl}}-->
                        </div>
                      </li>
                      <li class="tableItem w100">
                        <div class="itemList">种仁含油率</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.fruitZrhyl"></el-input>
<!--                          {{this.seeDialogData.fruitZrhyl}}-->
                        </div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="产量性状" name="yield">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">座果率</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.yieldZgl"></el-input>
<!--                          {{this.seeDialogData.yieldZgl}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">结果量</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.yieldJgl"></el-input>
<!--                          {{this.seeDialogData.yieldJgl}}-->
                        </div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="油脂品质性状" name="grease">
                    <ul>
                      <li class="tableItem">
                        <div class="itemList">油酸</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilYs"></el-input>
<!--                          {{this.seeDialogData.oilYs}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">亚油酸</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilYys"></el-input>
<!--                          {{this.seeDialogData.oilYys}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">硬脂酸</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilYzs"></el-input>
<!--                          {{this.seeDialogData.oilYzs}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">棕榈酸</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilZyy"></el-input>
<!--                          {{this.seeDialogData.oilZyy}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">维生素E</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilWsse"></el-input>
<!--                          {{this.seeDialogData.oilWsse}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">角鲨烯</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilJsx"></el-input>
<!--                          {{this.seeDialogData.oilJsx}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">甾醇</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilZc"></el-input>
<!--                          {{this.seeDialogData.oilZc}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">多酚</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilDf"></el-input>
<!--                          {{this.seeDialogData.oilDf}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">碘值</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilDz"></el-input>
<!--                          {{this.seeDialogData.oilDz}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">色值</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilSz"></el-input>
<!--                          {{this.seeDialogData.oilSz}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">比重</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilBz"></el-input>
<!--                          {{this.seeDialogData.oilBz}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">酸值</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilSuz"></el-input>
<!--                          {{this.seeDialogData.oilSuz}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">过氧化值</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilGyhz"></el-input>
<!--                          {{this.seeDialogData.oilGyhz}}-->
                        </div>
                      </li>
                      <li class="tableItem">
                        <div class="itemList">皂化值</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.saponificationValue"></el-input>
<!--                          {{this.seeDialogData.saponificationValue}}-->
                        </div>
                      </li>
                      <li class="tableItem w100">
                        <div class="itemList">不皂化物</div>
                        <div class="itemList">
                          <el-input placeholder="请填写" v-model="updataDialogData.oilBzhw"></el-input>
<!--                          {{this.seeDialogData.oilBzhw}}-->
                        </div>
                      </li>
                    </ul>
                  </el-tab-pane>
                  <el-tab-pane label="附件" name="enclosure" v-if="this.updataDialogData.fileType !== null">
                    <el-tabs v-model="editActiveName" @tab-click="editHandleClick">
                      <el-tab-pane label="编辑" name="edit">
                        <el-button type="primary" class="dialogBtn" @click="deleteFileData" size="mini" v-if="this.updataDialogData.fileType && this.updataDialogData.fileList.length > 0">删除</el-button>
                        <div class="enclosureItem enclosureMp3 " v-if="this.updataDialogData.fileType === 'mp3' && this.updataDialogData.fileList.length > 0">
                          <el-scrollbar style="height: 100%">
<!--                            <div v-for="(item,index) in this.updataDialogData.fileList" :key="index" class="mp3Item">-->
<!--                              <el-checkbox v-model="item.checked" @change="fileChangeItem(item.id, item.checked)">-->
<!--                              </el-checkbox>-->
<!--                              <audio :src="item.path" controls="controls" style="height: 100%">-->
<!--                                您的浏览器不支持 video 标签。-->
<!--                              </audio>-->
<!--                            </div>-->
                            <el-checkbox-group v-model="deleteFileId" @change="fileChangeItem">
                              <div v-for="(item,index) in this.updataDialogData.fileList" :key="index" class="mp3Item">
                                <el-checkbox :label="item.id" class="" style="height: 100%;width: 100%">
                                  <audio controls="controls" :src="fileServerUrl + item.path" style="height: 100%">
                                    当前浏览器不支持audio
                                  </audio>
                                </el-checkbox>
                              </div>
                            </el-checkbox-group>
                          </el-scrollbar>
                        </div>
                        <div class="enclosureItem enclosureVideo" v-if="this.updataDialogData.fileType === 'video' && this.updataDialogData.fileList.length > 0">
                          <el-scrollbar style="height: 262px">
<!--                            <div v-for="(item,index) in this.updataDialogData.fileList" :key="index" class="videoItem">-->
<!--                              <el-checkbox v-model="item.checked" @change="fileChangeItem(item.id, item.checked)">-->
<!--                              </el-checkbox>-->
<!--                              <video :src="item.path" controls="controls" width="100%" height="100%">-->
<!--                                您的浏览器不支持 video 标签。-->
<!--                              </video>-->
<!--                            </div>-->
                            <el-checkbox-group v-model="deleteFileId" @change="fileChangeItem">
                              <div v-for="(item,index) in this.updataDialogData.fileList" :key="index" class="videoItem">
                                <el-checkbox :label="item.id" class="editCheckbox" style="height: 100%;width: 100%">
                                  <video :src="fileServerUrl + item.path" controls="controls" width="100%" height="100%">
                                    您的浏览器不支持 video 标签。
                                  </video>
                                </el-checkbox>
                              </div>
                            </el-checkbox-group>
                          </el-scrollbar>
                        </div>
                        <div class="enclosureItem enclosureImg" v-if="this.updataDialogData.fileType === 'img' && this.updataDialogData.fileList.length > 0">
                          <el-scrollbar style="height: 200px">
<!--                            <div v-for="(item,index) in this.updataDialogData.fileList" :key="index" class="enclosureImgList">-->
<!--                              &lt;!&ndash;                          :preview-src-list="getSrcList(index)"&ndash;&gt;-->
<!--                              <el-checkbox v-model="item.checked" @change="fileChangeItem(item.id, item.checked)" class="imgChecked" :class="{'showChecked': item.checked === true}">-->
<!--                              </el-checkbox>-->
<!--                              <el-image-->
<!--                                  style="width: 100%; height: 100%"-->
<!--                                  :src="item.path"-->
<!--                              >-->
<!--                              </el-image>-->
<!--                            </div>-->
                                <el-checkbox-group v-model="deleteFileId" @change="fileChangeItem">
                                  <div v-for="(item,index) in this.updataDialogData.fileList" :key="index" class="enclosureImgList">
                                    <!--                          :preview-src-list="getSrcList(index)"-->
                                    <el-checkbox @change="changeItem(item.id, item)" :label="item.id" class="imgChecked" :class="{'showChecked': item.checked === true}">

                                    </el-checkbox>
                                    <el-image
                                        style="width: 100%; height: 100%"
                                        :src="fileServerUrl + item.path"
                                    >
                                    </el-image>
                                  </div>
                                </el-checkbox-group>
                          </el-scrollbar>
                        </div>
                        <div v-if="!this.updataDialogData.fileType || this.updataDialogData.fileList.length === 0">
                          暂无数据
                        </div>
                      </el-tab-pane>
                      <el-tab-pane label="上传" name="updata">
                        <el-upload
                            :before-upload="beforeAvatarUpload"
                            class="upload-demo editUpload"
                            :accept="fileFormat"
                            drag
                            action=""
                            multiple>
                          <i class="el-icon-upload"></i>
                          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                          <div class="el-upload__tip" slot="tip">{{this.fileFormatText}}</div>
                        </el-upload>
                      </el-tab-pane>
                    </el-tabs>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
          <div class="dialog-footer" slot="footer">
            <el-button class="dialogBtn" type="primary" @click="sureUpdata">修改</el-button>
            <el-button class="dialogBtn" type="primary" @click="updataCancel">取消</el-button>
          </div>
        </el-dialog>
      </div>
      <!--  删除    -->
      <Dialog :is-show-dialog="this.isShowDeleteDialog" @close="close" title="删除信息">
        <div slot="content">
          确定删除该附件
        </div>
        <div slot="Footer" style="position: relative;z-index: 9999;text-align: center">
          <el-button class="dialogBtn" @click="sureDeleteFile" type="primary">确定</el-button>
          <el-button @click="isShowDeleteDialog = false" class="dialogBtn" type="primary">取消</el-button>
        </div>
      </Dialog>
    </div>
    <Loding v-if="isShowLoading" :text="loadingText"></Loding>
  </div>
</template>

<script>
// import { regionData } from 'element-china-area-data'
import oilteaSurveyApi from '@/api/oilteaSurveyApi'
import Loding from '../../../components/Loding'
import Dialog from '../../../components/Dialog'
export default {
  name: 'surveyData',
  components: {
    Loding, Dialog
  },
  mounted () {
    // this.getTbHeight()
    // console.log(window.localStorage.token);
  },
  data () {
    return {
      fileServerUrl: null,
      investigationDate: '',
      // city: regionData,
      // selectedOptions: [],
      fruitSfylData: [
        {
          value: '有',
          label: '有'
        },
        {
          value: '无',
          label: '无'
        }
      ], // 是否有棱
      // 果形
      fruitGxData: [
        {
          value: '扁球形',
          label: '扁球形'
        },
        {
          value: '球形',
          label: '球形'
        },
        {
          value: '椭圆形',
          label: '椭圆形'
        },
        {
          value: '卵球形',
          label: '卵球形'
        },
        {
          value: '倒卵球形',
          label: '倒卵球形'
        }
      ],
      // 花柱开裂程度
      flowerZtklcdData: [
        {
          value: '浅裂',
          label: '浅裂'
        },
        {
          value: '中裂',
          label: '中裂'
        },
        {
          value: '深裂',
          label: '深裂'
        }
      ],
      // 花柱开裂数
      flowerHzklsData: [
        {
          value: '1',
          label: '1'
        },
        {
          value: '2',
          label: '2'
        },
        {
          value: '3',
          label: '3'
        },
        {
          value: '4',
          label: '4'
        },
        {
          value: '5',
          label: '5'
        }
      ],
      // 叶形
      leafShapeData: [
        {
          value: '近圆形',
          label: '近圆形'
        },
        {
          value: '椭圆形',
          label: '椭圆形'
        },
        {
          value: '长椭圆形',
          label: '长椭圆形'
        },
        {
          value: '披针形',
          label: '披针形'
        }
      ],
      // 叶面平展度
      leafYmpzdData: [
        {
          value: '平整',
          label: '平整'
        },
        {
          value: '波浪',
          label: '波浪'
        },
        {
          value: '反卷',
          label: '反卷'
        }
      ],
      // 叶尖形态
      leafYjxtData: [
        {
          value: '渐尖',
          label: '渐尖'
        },
        {
          value: '钝尖',
          label: '钝尖'
        },
        {
          value: '圆尖',
          label: '圆尖'
        }
      ],
      // 新梢颜色
      limbXsysData: [
        {
          value: '绿色',
          label: '绿色'
        },
        {
          value: '红色',
          label: '红色'
        }
      ],
      // 新梢长度
      limbXscdData: [
        {
          value: '上层',
          label: '上层'
        },
        {
          value: '中层',
          label: '中层'
        },
        {
          value: '下层',
          label: '下层'
        },
        {
          value: '东',
          label: '东'
        },
        {
          value: '西',
          label: '西'
        },
        {
          value: '南',
          label: '南'
        },
        {
          value: '北',
          label: '北'
        }
      ],
      // 新梢发枝量
      limbXsfzlData: [
        {
          value: '上层',
          label: '上层'
        },
        {
          value: '中层',
          label: '中层'
        },
        {
          value: '下层',
          label: '下层'
        },
        {
          value: '树冠内层',
          label: '树冠内层'
        }
      ],
      samplePlantType: '',
      samplePlantTypeData: [
        {
          value: '栽培良种林分',
          label: '栽培良种林分'
        },
        {
          value: '无性系林分',
          label: '无性系林分'
        },
        {
          value: '优树',
          label: '优树'
        },
        {
          value: '野生资源',
          label: '野生资源'
        }
      ],
      // 树形
      treeFormData: [
        {
          value: '球形',
          label: '球形'
        },
        {
          value: '圆锥形',
          label: '圆锥形'
        }
      ],
      // 树势
      treePotentialData: [
        {
          value: '好',
          label: '好'
        },
        {
          value: '一般',
          label: '一般'
        },
        {
          value: '弱',
          label: '弱'
        }
      ],
      species: '',
      speciesData: [
        {
          value: '普通油茶',
          label: '普通油茶'
        },
        {
          value: '香花油茶',
          label: '香花油茶'
        },
        {
          value: '陆川油茶',
          label: '陆川油茶'
        },
        {
          value: '宛田红花油茶',
          label: '宛田红花油茶'
        },
        {
          value: '广宁红花',
          label: '广宁红花'
        },
        {
          value: '小果油茶',
          label: '小果油茶'
        },
        {
          value: '博白大果油茶',
          label: '博白大果油茶'
        },
        {
          value: '南荣油茶',
          label: '南荣油茶'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      showChecked: false,
      fileFormat: '',
      fileFormatText: '',
      fileType: '',
      infoId: '', // 点击编辑时该条数据的id
      isShowDeleteDialog: false,
      deleteFileId: [], // 要删除的附件id
      editActiveName: 'edit',
      errTimeout: null,
      timeout: null,
      isShowLoading: false,
      loadingText: '',
      // 表格样式
      elTableH: null,
      cellStyle: {height: '60px', fontSize: '16px'},
      HeaderStyle: {height: '70px', fontSize: '16px'},
      tableData: [],
      seeDialogData: {},
      updataDialogData: {

      },
      dialogRoleVisible: false,
      seeDialogFormVisible: false,
      editDialogFormVisible: false,
      activeName: 'tree',
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      status: null,
      time: null,
      startTime: null,
      endTime: null,
      options: [{
        label: '全部',
        value: null
      }, {
        label: '已处理',
        value: true
      }, {
        label: '未处理',
        value: false
      }]
    }
  },
  computed: {
    tableDataTotalCount () {
      return this.totalCount ? this.totalCount : 0
    }
  },
  created () {
    this.fileServerUrl = process.env.FILE_SERVER
    this.findOilteaSurvey()
  },
  // beforeMount () {
  //   window.addEventListener('resize', this.getTbHeight)
  // },
  methods: {
    handleChange (value) {
      console.log(value)
    },
    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    beforeAvatarUpload (file) {
      let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (this.fileFormat.indexOf(testmsg) !== -1) {
        let form = new FormData()
        form.append('file', file)
        form.append('parentId', this.infoId)
        form.append('fileType', this.fileType)
        oilteaSurveyApi.uploadFile(form).then(res => {
          if (res.data.messageType === '0') {
            this.$message({
              message: '上传成功',
              type: 'success'
            })
            this.getInfoData()
            this.findOilteaSurveyNoLoading()
          }
        }).catch((error) => {
          console.log(error)
        })
      } else {
        this.$message({
          message: `上传文件只能是${this.fileFormat}格式!`,
          type: 'warning'
        })
      }
      // const extension = testmsg === 'xls'
      // const extension2 = testmsg === 'xlsx'
      // // const isLt2M = file.size / 1024 / 1024 < 10
      // if (!extension && !extension2) {
      //   this.$message({
      //     message: '上传文件只能是 xls、xlsx格式!',
      //     type: 'warning'
      //   })
      // }
      // return extension || extension2
    },
    async sureUpdata () {
      // if (this.updataDialogData.sampleVo.surveyDay === '') {
      //   this.$message('请填写调查日期')
      //   return
      // }
      console.log(this.selectedOptions)
      console.log(this.updataDialogData)
      let updateResult = await oilteaSurveyApi.update(this.updataDialogData)
      // console.log(updateResult);
      if (updateResult.status === 200) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.findOilteaSurveyNoLoading()
      }
    },
    async uploadSuccess (res) {
      console.log(res)
    },
    uploadError (err) {
      this.$message.error('上传失败，请重试')
    },
    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    // 文件超出个数限制时的钩子
    fileExceed (file, fileList) {
      this.$message.error('最多只能选一张图片')
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    fileChange (file, fileList) {
      console.log(fileList)
      console.log(file)
      if (fileList.length > 0) {
        this.haveFile = true
        this.fileName = '已选择图片，点击按钮开始识别'
      } else {
        this.haveFile = false
      }
    },
    seeCancel () {
      this.seeDialogFormVisible = false
      this.closeMedia()
    },
    updataCancel () {
      this.editDialogFormVisible = false
      this.deleteFileId = []
      this.closeMedia()
    },
    // 关闭音频视频的播放
    closeMedia () {
      let video = document.getElementsByTagName('video')
      let audio = document.getElementsByTagName('audio')
      for (let i = 0; i < audio.length; i++) {
        audio[i].pause()
      }
      for (let i = 0; i < video.length; i++) {
        video[i].pause()
      }
    },
    // 获取table高度的方法
    // getTbHeight () {
    //   this.elTableH = window.innerHeight - 266 // x为你需要计算的值
    // },
    fileChangeItem (value) {
      // this.deleteFileId = ''
      // check ? this.deleteFileId = id : this.deleteFileId = ''
      // let fileFile = this.updataDialogData.fileList
      // fileFile.forEach(list => {
      //   if (list.id !== id) {
      //     list.checked = false
      //   }
      // })
      // console.log(value);
    },
    changeItem (id, data) {
      if (this.deleteFileId.length === 0) {
        this.$set(data, 'checked', false)
      }
      this.deleteFileId.forEach(item => {
        if (item === id) {
          this.$set(data, 'checked', true)
        } else {
          this.$set(data, 'checked', false)
        }
      })
    },
    async getInfoData () {
      let getResult = await oilteaSurveyApi.getInfo(this.infoId)
      // console.log(getResult);
      if (getResult.status === 200 && getResult.data.result !== null) {
        this.updataDialogData = getResult.data.result
        if (this.updataDialogData.sampleVo === null) {
          this.updataDialogData.sampleVo = {
            'id': '',
            'species': '',
            'lon': '',
            'lat': '',
            'surveyDay': '',
            'surveySite': '',
            'sampleNumber': '',
            'area': '',
            'plantSpac': '',
            'lineSpac': '',
            'afforestDate': '',
            'aspect': '',
            'plantType': '',
            'surveyTime': ''
          }
        }
      }
      console.log(this.updataDialogData)
    },
    // 删除附件
    async sureDeleteFile () {
      let deleteResult = await oilteaSurveyApi.deleteFile({
        'ids': this.deleteFileId
      })
      this.isShowLoading = true
      this.loadingText = '正在删除'
      if (deleteResult.status === 200) {
        this.timeout = setTimeout(() => {
          this.isShowLoading = false
          this.isShowDeleteDialog = false
          this.$message({
            message: '成功删除附件',
            type: 'success'
          })
          this.getInfoData().then(res => {
            let arr = this.updataDialogData.fileList
            arr.forEach(item => {
              this.$set(item, 'checked', false)
            })
          })
          clearTimeout(this.timeout)
        }, 1000)
      } else {
        this.errTimeout = setTimeout(() => {
          this.isShowLoading = false
          this.$message.error('删除失败')
          clearTimeout(this.errTimeout)
        })
      }
    },
    close (data) {
      this.isShowDeleteDialog = data
    },
    deleteFileData () {
      if (this.deleteFileId.length > 0) {
        this.isShowDeleteDialog = true
      } else {
        this.$message('请先勾选要删除的附件')
      }
    },
    editHandleClick (tab, event) {
      // console.log(tab, event);
    },
    findOilteaSurveyNoLoading () {
      oilteaSurveyApi.findOilteaSurvey({
        sampleId: this.sampleId,
        isFindSample: true,
        status: this.status,
        startTime: this.startTime,
        endTime: this.endTime,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex
      }).then((res) => {
        // console.log(res);
        if (res.status === 200 && res.data.result.rows !== null && res.data.result.rows.length > 0) {
          this.isShowLoading = false
          this.tableData = []
          let row = res.data.result.rows
          row.forEach(r => {
            if (r.status) {
              r.status = '已处理'
            } else {
              r.status = '未处理'
            }
            this.tableData.push(r)
          })
          this.totalCount = res.data.result.totalCount
        } else {
          this.$message.error('刷新失败')
        }
      })
    },
    getOilteaSurvey () {
      this.pageIndex = 1
      this.pageSize = 10
      this.findOilteaSurvey()
    },
    findOilteaSurvey () {
      this.isShowLoading = true
      this.loadingText = '正在查询'
      oilteaSurveyApi.findOilteaSurvey({
        sampleId: this.sampleId,
        isFindSample: true,
        status: this.status,
        startTime: this.startTime,
        endTime: this.endTime,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex
      }).then((res) => {
        // console.log(res);
        if (res.status === 200 && res.data.result.rows !== null && res.data.result.rows.length > 0) {
          this.startTime = setTimeout(() => {
            this.isShowLoading = false
            this.tableData = []
            let row = res.data.result.rows
            row.forEach(r => {
              if (r.status) {
                r.status = '已处理'
              } else {
                r.status = '未处理'
              }
              this.tableData.push(r)
            })
            this.totalCount = res.data.result.totalCount
            clearTimeout(this.startTime)
          }, 1000)
        } else {
          this.errTimeout = setTimeout(() => {
            this.isShowLoading = false
            this.tableData = []
            this.totalCount = 0
            clearTimeout(this.errTimeout)
          }, 1000)
        }
      })
    },
    pager (val) {
      this.pageIndex = val
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.tableData = []
      this.findOilteaSurvey()
    },
    handleCurrentChange (val) {
      this.pageIndex = val
      this.tableData = []
      this.findOilteaSurvey()
    },
    cancelClock () {
      this.dialogRoleVisible = false
    },
    async editSurveyData (data) {
      this.infoId = data.id
      this.fileType = data.fileType
      // let getResult = await oilteaSurveyApi.getInfo(this.infoId)
      // // console.log(getResult);
      // if (getResult.status === 200 && getResult.data.result !== null) {
      //   this.updataDialogData = getResult.data.result
      // }
      // this.updataDialogData = {}
      // this.updataDialogData = JSON.parse(JSON.stringify(data))
      this.editDialogFormVisible = true
      this.getInfoData().then(res => {
        let arr = this.updataDialogData.fileList
        if (this.updataDialogData.fileType === 'video') {
          this.fileFormat = '.mp4,.flv,.swf,.ogg,.webm,.avi,.rmvb'
          this.fileFormatText = '只能上传.mp4,.flv,.swf,.avi等视频格式'
        }
        if (this.updataDialogData.fileType === 'mp3') {
          this.fileFormat = '.mp3,.wma,.amr,.ape,.flac,.aac,.mpeg-4,.mpeg,.alff,.wave,.cd,.wav'
          this.fileFormatText = '只能上传.mp3,.wma,.amr等音频格式'
        }
        if (this.updataDialogData.fileType === 'img') {
          this.fileFormat = '.jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF'
          this.fileFormatText = '只能上传.jpg,.jpeg,.png等图片格式'
          arr.forEach(item => {
            this.$set(item, 'checked', false)
          })
          console.log(this.updataDialogData)
        }
      })
    },
    seeSurveyData (data) {
      console.log(data)
      this.seeDialogData = {}
      this.seeDialogData = data
      this.seeDialogFormVisible = true
    },
    timeChange (params) {
      if (params) {
        this.startTime = this.conversionTime(params[0])
        this.endTime = this.conversionTime(params[1])
      } else {
        this.startTime = null
        this.endTime = null
      }
    },
    conversionTime (time) {
      let year = time.getFullYear()
      let month = (time.getMonth() < 9 ? '0' : '') + (time.getMonth() + 1)
      let day = (time.getDate() < 10 ? '0' : '') + time.getDate()
      return year + '-' + month + '-' + day
    }
  }
}
</script>

<style lang="less" scoped>
  .demo-form-inline /deep/ .el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
    background-color: deepskyblue !important;
  }

  #QRCode {
    display: flex;
    justify-content: center;
  }

  .search {
    margin: 30px 0 0 57px;
  }

  .sName {
    margin-left: 60px;
    color: #fff;
    font-size: 15px;
  }

  .avue-crud__pagination {
    margin: 10px 0 0 80%;
  }

  .upload0 {
    background-color: #0E6BB7;
    color: #fff;
    border-radius: 0;
    border: 0;
  }

  .upload {
    background: transparent;
    border: 1px solid #00ffff;
    color: #00ffff;
    border-radius: 3px;
    margin-left: 40px;
    height: 42px;
  }

  .upload:hover {
    background: rgba(0, 0, 0, 0) url(../../../assets/img/btn.png) no-repeat scroll 50% 50% / cover;
    border: 1px solid #00ffff;
  }

  .p-frame {
    -webkit-appearance: none;
    background-color: transparent;
    background-image: none;
    border-radius: 0;
    color: #FFF;
  }

  .upload1 {
    background-color: #0E6BB7;
    color: #fff;
    border-radius: 0;
    border: 0;
    margin-left: 40px;
  }

  .scollWrap {
    margin-top: 2%;
    height: calc(100vh - 223px);
    width: 100%;
    & /deep/ .el-scrollbar__wrap {
      /* overflow: scroll; */
      overflow-y: auto;
      overflow-x: hidden;
      /*height: 100%;*/
    }
  }

  .forms {
    /*width: 94%;*/
    /*!*height: auto;*!*/
    /*!*overflow-x: hidden;*!*/
    /*margin: 30px 0 0 3%;*/
    height: calc(100vh - 225px);
    /*background-color: red;*/
    /*padding: 2% 2.5% 2%;*/
    padding: 0 2.5% 0;
    box-sizing: border-box;

    .tableLine {
      /*overflow: auto;*/
      height: calc(100vh - 266px);
      /*height: 100%;*/
      /*max-height: 675px;*/
      /*height: 100%;*/
      /*background-color: pink;*/

      & /deep/ .el-scrollbar__wrap {
        /* overflow: scroll; */
        overflow-y: scroll;
        overflow-x: hidden;
        height: 100%;
      }

      & /deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
        background: none;
      }

      & /deep/ .el-table__fixed-right::before, .el-table__fixed::before {
        background: none;
      }
    }
  }

  table.table-all tr td {
    border: 1px solid #D3D3D3;
  }

  /deep/ .el-input__inner {
    width: 100%;
    height: 46px;
    color: #FFFFFF;
    font-size: 1.5rem;
    border: 0;
    background-color: transparent;
    margin-top: 1px;
  }

  /deep/ .el-input__icon {
    margin-top: 3px;
  }

  /deep/ .el-collapse {
    outline: 0;
    border: 0;
  }

  /deep/ .el-collapse-item__header {
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: transparent;
    color: #FFF;
    cursor: pointer;
    border: 0;
  }

  /deep/ .el-collapse-item__content {
    padding-bottom: 0px;
    font-size: 13px;
    color: #FFF;
    border-bottom: 0;
  }

  /deep/ .el-collapse-item__wrap {
    background-color: transparent;
    border-bottom: 0;
  }

  /deep/ .el-collapse-item__header {
    font-size: 16px;
    padding-left: 11px;
    border-bottom: 1px solid #D3D3D3;
    width: 98.9%;
  }

  /deep/ .el-collapse-item__header.is-active {
    font-size: 16px;
    padding-left: 11px;
  }

  /deep/ .el-collapse-item__arrow {
    margin-right: 35px;
  }

  /deep/ .el-collapse-item__arrow.is-active {
    margin-right: 35px;
  }

  /deep/ .table-select {
    width: 180px;
    height: 35px;
    border: 1px solid #fff;
    background: 0 0;
    color: #D3D3D3;
  }

  .qr-ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    border: 1px solid #D3D3D3;
  }

  .footer {
    margin-top: 32px;
    color: #ffffff;
    font-size: 16px;

    .info {
      .select {
        width: 52px;
        height: 35px;
      }

      .select /deep/ .el-input__inner {
        padding-left: 5px;
        padding-right: 0;
      }

      .select /deep/ .el-input__icon {
        width: 15px;
      }

      .select /deep/ .el-select__caret {
        /*transform:rotate(270deg);*/
        /*color: black;*/
      }

      .select /deep/ .el-select__caret.is-reverse {

      }
    }

    .paging {
      /*background-color: pink;*/
      text-align: right;
      padding-right: 30px;
      margin-top: -20px;
      & /deep/ .el-pagination__sizes .el-input .el-input__inner{
        border: 1px solid white;
      }
      & /deep/ .el-pagination__sizes .el-input .el-input__inner:hover{
        border-color: #0FF
      }
      & /deep/ .el-pagination.is-background .btn-prev {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pagination.is-background .btn-next {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pager li {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pagination__total, & /deep/ .el-pagination__sizes {
        float: left;
        font-size: 1.6rem;
        height: 35px;
        line-height: 35px;
      }

      & /deep/ .el-input__inner {
        /*width:52px;*/
        height: 35px;
      }

      & /deep/ .el-input__icon {
        /*width: 20px;*/
        /*line-height: 3;*/
      }

      & /deep/ .el-input .el-input__inner {
        padding-right: 20px;
        color: #FFFFFF;
        font-size: 1.6rem;
      }
    }
  }

  .seeDialogTable {
    .seeDialogParent {
      .parentTable {

      }
    }

    .seeDialogChild {
      margin-top: 15px;

      .childTable {
        .editUpload{
          text-align: center;
          & /deep/ .el-upload-dragger{
            background: none !important;
            padding-top: 11px;
            width: 225px;
            height: 130px;
          }
          & /deep/ .el-upload-dragger .el-icon-upload {
            margin: 0;
            line-height: 1;
          }
        }
      }

      .enclosureItem {
        margin-top: 10px;

        & /deep/ .el-scrollbar__wrap {
          /* overflow: scroll; */
          overflow-y: scroll;
          overflow-x: hidden;
          height: 100%;
        }
      }

      .enclosureImg {
        width: 100%;
      }

      .enclosureImgList {
        cursor: pointer;
        display: inline-flex;
        flex-wrap: wrap;
        width: 32%;
        height: 190px;
        padding: 20px 0 0 20px;
        box-sizing: border-box;
        margin-bottom: 10px;
        margin-right: 2%;
        position: relative;

        &:hover .imgChecked{
          /*display: block;*/
          visibility: visible;
        }
        .imgChecked{
          visibility: hidden;
          &.showChecked{
            visibility: visible;
          }
        }
        & /deep/ .el-checkbox__input{
          position: absolute;
          top: -20px;
          left: -15px;
        }
        & /deep/ .el-checkbox__label{
          padding-left: 0;
          height: 100%;
          width: 100%;
          display: none;
        }
        &:nth-of-type(3n) {
          margin-right: 0;
        }
      }

      .enclosureMp3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 150px;
        line-height: 150px;
        /*text-align: center;*/
      }

      .enclosureVideo {
        width: 100%;
        /*& /deep/ .el-scrollbar__thumb{*/
        /*  display: none;*/
        /*}*/
        & /deep/ .el-scrollbar__wrap {
          /* overflow: scroll; */
          overflow-y: scroll;
          overflow-x: hidden;
          height: 100%;
        }
      }

      .videoItem {
        display: inline-flex;
        width: 48%;
        height: 250px;
        margin-bottom: 10px;
        position: relative;
        .editCheckbox{
          /*display: none;*/
          /*display: inline-block;*/
          /*position: absolute;*/
          /*top: 0;*/
          /*left: 0;*/
        }
        & /deep/ .el-checkbox__input{
          position: absolute;
        }
        & /deep/ .el-checkbox__label{
          padding-left: 0;
          height: 100%;
          width: 100%;
        }
        &:nth-of-type(odd) {
          margin-right: 2%;
        }
      }

      .mp3Item {
        height: 40px;
        width: 400px;
        margin-bottom: 10px;
        /*display: flex;*/
        /*justify-content: space-between;*/
        & /deep/ .el-checkbox__input{
          position: relative;
          top: -13px;
          margin-right: 35px;
        }
        & /deep/.el-checkbox__label{
          padding-left: 0;
          height: 100%;
          width: 100%;
        }
        & /deep/ .el-checkbox__inner{
          height: 18px;
          width: 18px;
        }
        & /deep/ .el-checkbox__inner::after{
          left: 6px;
          top: 3px;
        }
      }
    }

    .seeDialogTitle {
      text-align: center;
      font-size: 18px;
      margin-bottom: 15px;
    }

    ul {
      box-sizing: border-box;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      border-left: 1px solid #ffffff;
      border-top: 1px solid #ffffff;
    }

    .tableItem {
      display: flex;
      width: 50%;
      height: 30px;
      font-size: 16px;
      line-height: 30px;
      box-sizing: border-box;
    }

    .w100 {
      text-align: center;
      width: 100%;
    }

    .itemList {
      width: 50%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
      border-bottom: 1px solid #ffffff;
      border-right: 1px solid #ffffff;
      text-indent: 10px;
      .datePicker {
        & /deep/ .el-input__inner{
          padding: 0;
          height: 100%;
          margin-left: -57px;
          text-indent: 80px;
        }
        & /deep/ .el-input__icon{
          margin-left: -9px;
        }
      }
      & /deep/ .el-cascader{
        display: block;
        line-height: 30px;
      }
      & /deep/ .el-input__suffix {
        right: 10px;
      }
      & /deep/ .el-input__icon{
        height: auto;
        line-height: normal;
      }
      & /deep/ .el-input__inner{
        padding: 0;
        height: 100%;
        margin-left: -14px;
        text-indent: 14px;
      }
      & /deep/ .el-input{
        text-indent: 0;
      }
      & /deep/ .el-input.is-disabled .el-input__inner{
        background: none;
      }
    }
  }
</style>
<style>
  .params {
    height: 42px;
    line-height: 42px;
    /*background-color: pink;*/

    & /deep/ .el-form--inline .el-form-item__label {
      font-size: 17px;
    }

    & /deep/ .el-input__inner {
      margin-top: 0;
      height: 0;
    }
  }

  .ctrl .el-input__inner {
    height: 42px;
    /*color: #cdd3e0;*/
    border: 1px solid #DCDFE6
  }

  .ctrl .el-range-editor.is-active, .el-range-editor.is-active:hover {
    border-color: #3abcb0 !important
  }

  .ctrl .el-date-editor .el-range-input, .ctrl .el-date-editor .el-range-separator {
    -webkit-appearance: none;
    background-color: transparent;
    background-image: none;
    border-radius: 0;
    color: #FFF;
    height: 42px;
    line-height: 42px;
  }

  .el-loading-spinner i {
    font-size: 20px;
    color: #3abcb0 !important
  }

  .el-loading-spinner .el-loading-text {
    font-size: 15px;
    color: #3abcb0 !important
  }
</style>
